<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <div class="logo"></div>
      </template>

      <template #right>
        <van-button round type="primary" icon="search" to="/search"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 滑块导航栏 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in topChannel" :key="item.id" :title="item.name">
        <!-- 新闻列表 -->
        <articleList :channel_id="item.id" />
      </van-tab>
      <!-- 右侧标签 -->
      <div class="icon-warp" @click="channelShow = !channelShow">
        <van-icon name="wap-nav" />
      </div>
    </van-tabs>
    <van-action-sheet v-model="channelShow" title="频道管理">
      <management
        :ownChannels="topChannel"
        :allChannels="allChannels"
        v-model="active"
        @close="channelShow = false"
      />
      <!-- v-model 相当于 :value = 'active' @input = 'active = $event' -->
    </van-action-sheet>
  </div>
</template>

<script>
import management from './management.vue'
import { myChannelAPI, allChannelsAPI } from '@/api'
import articleList from './articleList.vue'
import { getChannel } from '@/utils/storage'
export default {
  data () {
    return {
      topChannel: [],
      allChannels: [],
      channelShow: false,
      active: 0
    }
  },
  components: {
    articleList,
    management
  },
  async created () {
    const allRes = await allChannelsAPI()
    this.allChannels = allRes.data.data.channels
    // 判断是否登录，如果登录了，正常发请求 或者没登陆，并且是第一次访问
    if (this.$store.state.tokenObj.token || !getChannel()) {
      const res = await myChannelAPI()
      this.topChannel = res.data.data.channels
    } else {
      // 没登录，但是本地有数据
      this.topChannel = getChannel()
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  .logo {
    background: url('@/assets/logo.jpg') no-repeat center / contain;
    width: 120px;
    height: 100%;
  }

  .van-button {
    width: 100px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    .van-icon {
      color: #fff;
    }
  }
}

.van-tabs {
  ::v-deep .van-tabs__wrap {
    width: 345px;
  }
  .icon-warp {
    position: absolute;
    right: 0;
    top: 0;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    .van-icon {
      font-size: 30px;
    }
  }
}
</style>
